import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {PageDecorationService} from './page-decoration.service';
import {NzMessageService} from 'ng-zorro-antd/message';
import {DatePipe} from '@angular/common';
import {environment} from '../../../../environments/environment';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'app-page-decoration',
  templateUrl: './page-decoration.component.html',
  styleUrls: ['./page-decoration.component.scss']
})
export class PageDecorationComponent implements OnInit {
  query = {
    title: '',
    page: 1,
    pageSize: 10,
  };
  tableData = {
    records: [],
    total: 0
  };
  modal = {
    type: 'add',
    data: {
      title: '',
      outsideTitle: '',
      note: '',
      backColor: '',
      topMode: '',
      userType: '',
      time: []
    } as any,
    visible: false,
  };
  previewModal = {
    visible: false,
    url: '',
    type: '',
  };
  USERTYPE = ['不限制', 'C端用户', 'B端用户'];
  h5Url = environment.VALUE_KEY_DECORATIONH5URL;
  pcUrl = environment.VALUE_KEY_DECORATIONPCURL;

  constructor(
    private router: Router,
    private pageDecorationService: PageDecorationService,
    private nzMessageService: NzMessageService,
    private datePipe: DatePipe,
    private domSanitizer: DomSanitizer
  ) {
  }

  ngOnInit(): void {
    this.getTableData();
  }

  getTableData() {
    this.pageDecorationService.getPageDecorationList(this.query).then((res: any) => {
      if (res.code === 0) {
        this.tableData = res.data;
      }
    });
  }

  onPageIndexChange(index: number) {
    this.query.page = index;
    this.getTableData();
  }

  onPageSizeChange(pageSize: number) {
    this.query.pageSize = pageSize;
    this.getTableData();
  }

  queryBtn() {
    this.query.page = 1;
    this.getTableData();
  }

  resetCondition() {
    this.query = {
      title: '',
      page: 1,
      pageSize: 10,
    };
    this.getTableData();
  }

  hideModal() {
    this.modal = {
      type: 'add',
      data: {},
      visible: false,
    };
  }

  showEditModal(data: any, type: 'copy' | 'edit') {
    this.modal.type = type;
    this.modal.data = JSON.parse(JSON.stringify(data));
    this.modal.data.time = [this.modal.data.takeEffectTime, this.modal.data.endTakeEffectTime];
    this.modal.visible = true;
  }

  saveDecoration() {
    if (!this.modal.data.title) {
      this.nzMessageService.error('请输入内部标题');
      return;
    }
    if (!this.modal.data.outsideTitle) {
      this.nzMessageService.error('请输入外部标题');
      return;
    }
    if (!this.modal.data.backColor) {
      this.nzMessageService.error('请输入背景色');
      return;
    }
    if (!this.modal.data.time.length) {
      this.nzMessageService.error('请选择生效时间');
      return;
    }
    this.pageDecorationService.saveDecoration({
      ...this.modal.data,
      takeEffectTime: this.datePipe.transform(this.modal.data.time[0], 'yyyy-MM-dd HH:mm:ss'),
      endTakeEffectTime: this.datePipe.transform(this.modal.data.time[1], 'yyyy-MM-dd HH:mm:ss'),
      id: this.modal.type === 'edit' ? this.modal.data.id : ''
    }).then((res: any) => {
      if (res.code === 0) {
        this.nzMessageService.success('操作成功');
        this.hideModal();
        this.getTableData();
      }
    });
  }

  toDecoration(data: any) {
    this.router.navigate(['/sell/editDecoration'], {queryParams: {data: JSON.stringify(data)}});
  }

  addPageDecoration() {
    this.modal = {
      type: 'add',
      data: {
        title: '',
        outsideTitle: '',
        note: '',
        backColor: '',
        topMode: 1,
        userType: 0,
        time: []
      },
      visible: true,
    };
  }

  showPreview(url: string, type: string) {
    this.previewModal = {
      visible: true,
      // @ts-ignore
      url: this.domSanitizer.bypassSecurityTrustResourceUrl(url),
      type,
    };
  }
}
